<template>
  <view class="details-container">
    <!-- 遮罩层 -->
    <view class="popup" @click="onClickOperate($event, 'close', {})"> </view>

    <view class="details-module">
      <!-- 头部 -->
      <view class="top">
        <view class="title">款式详情</view>
        <img
          class="close-icon"
          src="/static/images/back-1.png"
          alt=""
          @click="onClickOperate($event, 'close', {})"
        />
      </view>

      <scroll-view class="scroll-module" scroll-y>
        <!-- 商品图 -->
        <u-image
          width="100%"
          border-radius="20rpx"
          height="686rpx"
          :src="details.image"
          :lazy-load="true"
        ></u-image>
        <view class="product-title">{{ details.title || '' }} </view>
        <view class="info">
          <view class="cell-group">
            <view class="label">公司：</view>
            <view class="value">{{ details.producer || '-' }}</view>
          </view>
          <view class="cell-group">
            <view class="label">IP：</view>
            <view class="value">{{ details.ip.name || '-' }}</view>
          </view>
          <!-- <view class="cell-group">
            <view class="label">系列：</view>
            <view class="value">{{ details.name }}</view>
          </view> -->
          <view class="cell-group">
            <view class="label">尺寸：</view>
            <view class="value">{{ details.size || '-' }}</view>
          </view>
          <view class="cell-group">
            <view class="label">参考价：</view>
            <view class="value">￥{{ details.price || '-' }}</view>
          </view>
          <view class="cell-group">
            <view class="label">发售年份：</view>
            <view class="value">{{ details.release_time || '-' }}</view>
          </view>
        </view>

        <!-- 分割线 -->
        <view class="page"></view>
        <view class="detials"> {{ details.subtitle || '-' }}</view>
      </scroll-view>
    </view>
  </view>
</template>
<script>
import tools from '@/shopro/utils/tools';
const _delay = tools.delayDither(300);
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  props: {
    productId: {
      type: [String, Number],
      default: '',
    },
  },
  data: () => ({
    details: {},
  }),
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   * 在实例初始化之前被调用
   */
  beforeCreate() {},
  // 在实例创建完成后被立即调用
  created() {
    this.$http('v1.goodsDetails', {
      goods_id: this.productId,
    }).then((res) => {
      this.details = res.data;
    });
  },
  // 在挂载开始之前被调用
  beforeMount() {},
  // 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用nextTick
  mounted() {},
  // 数据更新时调用，发生在虚拟 DOM 打补丁之前
  beforeUpdate() {},
  // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  updated() {},
  // 实例销毁之前调用。在这一步，实例仍然完全可用
  beforeDestroy() {},
  // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  destroyed() {},
  methods: {
    /**
     *  页面点击事件 防抖
     * @param {Object} ev  $event
     * @param {String} name 执行名称
     * @param {Object} data 传值
     */
    onClickOperate(ev, name, data = {}) {
      _delay(() => {
        switch (name) {
          // 关闭弹窗
          case 'close':
            this.close(data);
            break;
        }
      });
    },
    // 关闭 弹窗
    close() {
      this.$emit('changeDetailsMod', false);
    },
  },
};
</script>
<style lang="scss" scoped>
.details-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100074;
  width: 100%;
  height: 100vh;
}
.popup {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
}

.details-module {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
  padding: 0 30rpx;
  width: 100%;
  height: 86vh;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  animation: slide-in-bottom 1s linear 0s 1 normal none;

  .top {
    position: relative;
    display: flex;
    padding: 30rpx 0;
    width: 100%;
    .title {
      display: flex;
      align-items: center;
      font-size: 32rpx;
      font-weight: 800;
      color: #000000;
    }
    .close-icon {
      position: absolute;
      top: 48rpx;
      right: 30rpx;
      width: 32rpx;
      height: 18rpx;
    }
  }

  .scroll-module {
    padding-bottom: 30rpx;
    width: 100%;
    height: calc(86vh - 120rpx);
  }

  .cover {
    width: 100%;
    min-height: 686rpx;
    border-radius: 20rpx;
    .cover-img {
      width: 100%;
    }
  }

  .product-title {
    margin: 34rpx 0;
    text-align: center;
    color: rgba(251, 100, 151, 1);
    font-size: 32rpx;
  }
  .info {
    .cell-group {
      display: flex;
      justify-content: space-between;

      margin-bottom: 20rpx;

      width: 100%;
      color: rgba(0, 0, 0, 1);
      font-size: 28rpx;
      .label {
      }
      .value {
      }
    }
  }
  .page {
    margin-bottom: 40rpx;
    width: 100%;
    height: 2rpx;
    &::before {
      content: '';
      display: block;
      width: 100%;
      height: 2rpx;
      border-bottom: 2rpx dotted #707070;
    }
  }
  .detials {
    padding: 0 12rpx;
    width: 100%;
    min-height: 132rpx;
  }
}
</style>
